<template>

  <el-menu class="el-menu-vertical-demo collagenHeight" :collapse="menuState"
           default-active="0"
           background-color="#1A1A1A"
           text-color="#fff"
           active-text-color="#409EFF" @select="handleTab">
    <div class="logo">技术交易</div>

    <!--   递归组件，这里的:item是递归组件中使用的item     -->
    <menu-template v-for="item in asideMenu" :key="item.id" :item="item"></menu-template>

  </el-menu>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import MenuTemplate from './MenuTemplate'

export default {
  name: "CommonAside",
  inject: ['reload'],
  components: {MenuTemplate},
  data() {
    return {
      asideMenu: [],
    }
  }, computed: {
    ...mapState({
      menuState: state => state.Admin.menuState,
      tabList: state => state.Admin.tabList
    })
  },
  methods: {
    ...mapMutations({
      addTab: 'addTab'
    }), handleTab: function (value) {
      let data = this.getSelectMenu(this.asideMenu, Number(value));
      let index = this.tabList.findIndex(item => item.id === data.id);
      if (index === -1) {
        this.$router.push({path: data.path});
      } else {
        //router3.0版本以上重复加载同一个路由会报错,所以给一个时间戳参数
        if (this.$route.path !== data.path) {
          this.$router.push({path: data.path});
        }
        //刷新页面
        this.reload();
      }
      this.addTab(data);
    }, getSelectMenu: function (arr, id) {//根据id查询menu
      let result = null;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].childMenu.length !== 0) {
          result = this.getSelectMenu(arr[i].childMenu, id);
          //函数如果没有配置的菜单，就会返回undefined
          if (result !== undefined && result !== null) {
            return result;
          }
        } else {
          if (arr[i].id === id) {
            result = {
              id: arr[i].id,
              path: arr[i].path,
              menuName: arr[i].menuName,
              menuIcon: arr[i].menuIcon
            };
            return result;
          }
        }
      }
    }, getDataByPath(arr, path) {//根据path查询menu,没有匹配到则返回undefined
      if (arr===undefined) return undefined;
      let result = null;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].childMenu && arr[i].childMenu.length !== 0) {
          result = this.getDataByPath(arr[i].childMenu, path);
          if (result !== undefined && result !== null) {
            return result;
          }
        } else {
          if (arr[i].path === path) {
            return result = {
              id: arr[i].id,
              path: arr[i].path,
              menuName: arr[i].menuName,
              menuIcon: arr[i].menuIcon
            };
          }
        }
      }
    }, addTabList() { //刷新浏览器
      let path = this.$route.path;
      let data = this.getDataByPath(this.asideMenu, path);
      if (this.tabList.length === 0 && path !== '/home' && data !== undefined) {
        this.addTab(data);
      }
    }, getData() {
      this.$axios.post('/menu/getMenu').then(res => {
        this.asideMenu = res.data;
        this.addTabList();
      })
    }
  }, created() {
    this.getData();
  }
}
</script>

<style scoped>
/*来自官网demo*/
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.logo {
  display: flex;
  color: white;
  font-family: Arial;
  height: 60px;
  align-items: center; /*垂直*/
  justify-content: center; /*水平居中*/
}
</style>

